线框原型 (线框图) 的本质及实践应用概述

家里小猫生病，从周二开始一直折腾到现在，仍在治疗与观察中。几年来经历过几次这样的状况，虽然每次都会恢复健康平安，但一旦再次置身这样的过程里，怎样也无法停止焦虑与担心。除了尽心尽力以外，能做的只有不断祈祷，期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章，也因为这样的状况而拖沓了多日；一方面没时间，一方面没有任何心力的感觉。不多说了，我们来看今次的译文。

如今的设计圈子里，线框原型(线框图)这个词正在越来越多的被提起。过去几年中，在软件和Web设计等相关行业里，线框原型得到了迅速的普及，同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲，使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢？最近，我(原文作者)与一些设计专业的学生进行了交流，他们问到不少关于线框原型的问题。通过这些问题，我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中，这个概念包括很多涉及视觉设计方面的因素。更糟的是，他们甚至不愿意去做线框原型方面的事情，他们只知道这是流程中的一个需要执行环节，却不明白它的重要性。这事弄的我相当郁闷，最初，我觉得这搞不好只是个例而已，但通过对行业内的现状进行观察，我逐渐发现，线框原型在很多项目流程中的执行情况真是够惨不忍睹的；原因来自很多方面，包括客户、设计新手、产品决策者等等。

实际上，线框原型的规划是Web设计中必不可少的重要步骤，设计师们应该真正了解它，并学会正确的运用它。

线框原型就是蓝图(blueprints)

设计师们通常都会明白，对于那些结构复杂的东西——比如建筑或是汽车——计划与架构设计工作是必不可少的；而涉及到互联网工业时，这些工作的重要性仿佛降低了。网站虽然不是汽车，但它本质上仍是一种复杂的综合项目。如果忽视了良好的蓝图规划，那么整个项目将会对时间、人力和金钱造成巨大的浪费。

在进一步了解线框原型的正确的实际应用方式之前，我们有必要首先了解一下它本质上究竟是什么，它的存在有哪些目的。

我个人认为，蓝图是对线框原型最恰当的比喻。人们不会将蓝图看作建筑物实际效果的渲染图，也不会通过它来制定视觉风格方面的决策。线框原型是纯粹的功能与信息的示意图。

对线框原型概念的误解

在实际应用中，我们还需要明白线框原型在概念上不是什么，并且最好可以对需求方、团队成员及相关合作部门进行解释说明。

线框原型不是设计

线框图应该彻底与字体字号、配色、图片等无关。多数人习惯进行形象思维，他们很容易将线框原型理解为在一定程度上表达了设计方案的设计稿。在线框图中过多的使用视觉化的元素，会干扰其对功能的呈现。始终要记住，线框图的作用是组织并呈现信息，要避免在视觉上过度的保真。

线框原型不代表最终布局结构

另外一个误解，就是人们时常觉得，视觉设计师要做的只是在线框图提供的布局结构的基础上进行美化工作；甚至在多数视觉设计师的观念中也是这样。从语义上讲，线框图所展示的布局，最主要的作用应该是描述功能与内容的逻辑关系，视觉设计师并不需要在所有的细节中受其制约。

线框原型不是交互原型

这两个概念之间的区别和联系确实容易让人混淆，从项目流程角度说，它们甚至是完全不同的两种工具。简单的说，线框图用来组织及呈现信息，而交互原型，顾名思义，用来展示及评估交互方式。多数时候，它们在形式上很相似，并且都应该避免使用那些容易造成干扰的高保真视觉元素。

线框原型的实际应用

正如在前文中提到的，很多设计师并不了解制作线框原型这个步骤在项目流程中的重要性，因为他们不清楚线框原型的本质和制作它的目的是什么。实际上，线框原型在项目流程中的目的性是很强的。下面，我们来看看线框原型在实际中的几个重要应用方面。

可用性测试

线框原型是进行早期可用性测试的最有效的方法之一。注意，我们在说的是可用性，而非用户体验；这两者之间是有区别的。可用性确实可以反映产品对于用户的友好程度，但它侧重于功能的使用方面，而不是指设计的角度。相应的，在进行可用性测试的过程中，应该尽量将注意力放在功能方面，不要被其他方面的因素干扰。

实践技巧

• 用户目标：使用线框原型模拟用户在完成使用目标的过程中可能执行的所有步骤。这种方式可以尽早发现网站功能架构方面的设计缺陷。
• 出错情景：线框原型可以帮助设计和开发人员更全面的预计到潜在的出错情景，并准备好相应的出错提示页面。

展示细节

对于设计和开发人员来说，有一个比较常见的困扰——很多时候，客户或需求决策者对产品的关注角度过于宏观，他们会对产品的功能进行非常空泛的描述，而对细节方面并没有明确的概念。这种情况下，线框原型能帮助我们有效的解决沟通方面的问题；大家可以通过这种可以看的到的方式，对产品的功能细节进行快速的勾勒，有效的传达信息。

实践技巧

• 对功能细节进行详细的描绘：不要只使用一个方框来表示某个组件，比如相册或地图等；要描绘出所有相关的元素，并且在必要的时候对功能逻辑进行文字注释。细节做的越到位，沟通效果越好。
  
• 预估相关内容的数量限制：很多设计师会忽略页面中的极端内容情况。诚然，在项目初期，我们很难对页面内容做确切的预估，但是在线框原型中做一些必要的范围限制还是可行的。与项目相关人员进行交流，讨论的要点包括某些标题的大致长度范围、内容中图片的数量、内容文字区域是否需要根据文字数量进行适应调整等。通过线框原型将这些细节问题确定下来，可以有效降低视觉设计及开发过程中返工的可能性。
  

将网站架构形象化

通常，除了架构师之外，团队中的多数成员会被网站架构方面的文档搞迷糊，尤其对于企业级的、或是信息结构逐步复杂化的大项目来说。架构方面的信息过于概念化，而线框原型正是将这些概念与有形的产品进行连接的第一步。

实践技巧

• 描绘导航元素：将架构信息形象化的起点，是将能够反映出架构的导航结构形象化。在线框原型中展示全局导航、次级导航及局部导航的结构，并描述他们之间的联系。
  
• 将操作步骤及出口形象化：要确保网站在结构上不会对用户造成死路或陷阱。我们可以使用线框原型与网站地图架构做对比，保证用户在执行操作的过程中的每一步都有前进、后退和退出的方式。我个人推荐使用Freemind一类的脑图工具。
  

总结

实际上，本文只是一篇概述；我们大致了解了线框原型的概念和本质、以及它在实际项目中的重要作用。文中提到的实践技巧只是在项目中创建有效的线框原型的一些基本要点。很多设计师在项目流程中都倾向于直接进入视觉设计的环节；出于对网站或软件项目的综合性与复杂性的考虑，不妨将这一步推后，首先通过线框原型做好计划与沟通的工作；实践成果会证明这是一种事半功倍的有效方式。